<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all">
</head>
<body>

<table class="layui-hide" id="table" lay-filter="table"></table>

<div class="layui-row" id="form" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" lay-filter="form" action="" style="margin-top:20px">
            <input name="id" type="hidden">
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" autocomplete="off"
                           placeholder="请输入权限名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限描述</label>
                <div class="layui-input-block">
                    <input type="text" name="desc" autocomplete="off" placeholder="请输入权限描述" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn  layui-btn-submit" lay-submit="" lay-filter="confirm">确认
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary cancel">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="save">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/static/plugin/layui/layui.js" charset="utf-8"></script>
<script src="/static/plugin/xh/js/xh-common.js"></script>

<script>
    layui.use('table', function () {
        let table = layui.table
            , form = layui.form
            , layer = layui.layer;

        $ = layui.jquery;

        table.render({
            elem: '#table'
            , url: '/sec/permission'
            , height: 'full-20'
            , cellMinWidth: 80
            , toolbar: '#toolbar'
            , cols: [[
                {field: 'id', title: 'ID', width: 100, hide: true}
                , {field: 'name', title: '角色名', width: 200, edit: true}
                , {field: 'desc', title: '角色描述', edit: true}
                , {fixed: 'right', title: '操作', toolbar: '#bar', width: 150}
            ]]
            , page: true
            , response: {
                statusCode: 100
            }
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data && res.data.total,
                    "data": res.data && res.data.records
                };
            }
        });

        let index;
        let openForm = function (data) {
            index = layer.open({
                type: 1,
                title: "表单",
                area: ['420px', '300px'],
                shadeClose: false,
                content: $("#form")
            });

            if (data) {
                form.val("form", data);
            }
        };

        $(document).on("click", ".cancel", function () {
            layer.close(index);
        });

        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    openForm({
                        id: '',
                        name: '',
                        desc: ''
                    });
                    break;
            }
        });

        let error = function (data) {
            layer.alert('失败');
        };

        table.on('tool(table)', function (obj) {
            let data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除？', function (index) {

                    del("/sec/permission/"+ data.id, function () {
                        obj.del();
                        layer.close(index);
                    }, error);
                });
            } else if (obj.event === 'save') {
                openForm(data);
            }
        });

        form.on('submit(confirm)', function (massage) {
            console.log("log", massage.field);
            let data = massage.field;

            if (data.id) {
                put("/sec/permission", data, function (data) {
                    table.reload('table', {});
                    layer.close(index);
                }, error)
            } else {
                post("/sec/permission", data, function (data) {
                    table.reload('table', {});
                    layer.close(index);
                }, error)
            }


            return false;
        })
    });
</script>

</body>
</html>